<template>
    <div>
        <a-page-header
            title="分步表单"
            :ghost="false"
            sub-title="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景"
        />

        <a-card class="mt-3">
            <template #title>
                <!-- <a-steps :current="current">
                    <a-step v-for="(v, i) in steps" :key="i" :title="v" />
                </a-steps> -->
                分步
            </template>

            <a-row type="flex" justify="center">
                <a-col :span="14">
                    <a-form
                        :model="form"
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 14 }"
                    >
                        <div v-if="current == 0">
                            <a-form-item label="Input输入">
                                <a-input v-model:value="form.input" />
                            </a-form-item>

                            <a-form-item label="下拉选择">
                                <a-select
                                    v-model:value="form.select"
                                    placeholder="请选择"
                                >
                                    <a-select-option value="0">
                                        上海
                                    </a-select-option>
                                    <a-select-option value="1">
                                        北京
                                    </a-select-option>
                                </a-select>
                            </a-form-item>

                            <a-form-item label="日期选择">
                                <a-date-picker
                                    v-model:value="form.date"
                                    placeholder="选择日期"
                                />
                            </a-form-item>

                            <a-form-item label="开关">
                                <a-switch v-model:checked="form.delivery" />
                            </a-form-item>

                            <a-form-item label="多选">
                                <a-checkbox-group v-model:value="form.type">
                                    <a-checkbox value="1" name="type">
                                        Number
                                    </a-checkbox>
                                    <a-checkbox value="2" name="type">
                                        Bool
                                    </a-checkbox>
                                    <a-checkbox value="3" name="type">
                                        Object
                                    </a-checkbox>
                                </a-checkbox-group>
                            </a-form-item>

                            <a-form-item label="单选">
                                <a-radio-group v-model:value="form.resource">
                                    <a-radio value="1"> 男 </a-radio>
                                    <a-radio value="2"> 女 </a-radio>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item label="文本域">
                                <a-text-area
                                    v-model:value="form.desc"
                                    :auto-size="{ minRows: 2, maxRows: 5 }"
                                />
                            </a-form-item>
                        </div>

                        <div v-if="current == 1">
                            <a-form-item label="Input输入">
                                {{ form.input }}
                            </a-form-item>

                            <a-form-item label="下拉选择">
                                {{ form.select }}
                            </a-form-item>

                            <a-form-item label="日期选择">
                                {{ form.date }}
                            </a-form-item>

                            <a-form-item label="开关">
                                {{ form.delivery }}
                            </a-form-item>

                            <a-form-item label="多选">
                                {{ form.type }}
                            </a-form-item>

                            <a-form-item label="单选">
                                {{ form.resource }}
                            </a-form-item>

                            <a-form-item label="文本域">
                                {{ form.desc }}
                            </a-form-item>
                        </div>

                        <div v-if="current == 2">
                            <a-result
                                status="success"
                                title="提交成功"
                                sub-title="订单号: 2017182818828182881"
                            >
                                <template #extra>
                                    <a-button type="primary">
                                        查看订单
                                    </a-button>
                                    <a-button> 返回 </a-button>
                                </template>
                            </a-result>
                        </div>

                        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                            <a-button
                                v-if="current == 0"
                                type="primary"
                                @click="next"
                            >
                                下一步
                            </a-button>
                            <a-button
                                v-if="current == steps.length - 2"
                                type="primary"
                                @click="done"
                            >
                                提交
                            </a-button>
                            <a-button v-if="current == 1" @click="prev">
                                上一步
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-col>
            </a-row>
        </a-card>
    </div>
</template>

<script lang="ts">
import { defineComponent, markRaw, reactive, ref } from "vue";
import { PageHeader, Result, Row, Col, Card, Steps, Button, Form, Input, Radio, Checkbox, Switch, DatePicker, Select, message } from "ant-design-vue";



export default defineComponent({
    components: {
        ACard: Card,
        ASteps: Steps,
        AStep: Steps.Step,
        AButton: Button,
        AForm: Form,
        AFormItem: Form.Item,
        AInput: Input,
        ATextArea: Input.TextArea,
        ARadio: Radio,
        ARadioGroup: Radio.Group,
        ACheckbox: Checkbox,
        ACheckboxGroup: Checkbox.Group,
        ASwitch: Switch,
        ADatePicker: DatePicker,
        ASelect: Select,
        ASelectOption: Select.Option,
        ARow: Row,
        ACol: Col,
        AResult: Result,
        APageHeader: PageHeader
    },
    setup() {
        const current = ref(0)
        const steps = markRaw(['请填写转账信息', '确认转账信息', '支付完成'])

        const form = reactive({
            input: '',
            select: undefined,
            date: undefined,
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        })


        const next = () => {
            current.value++
        }
        const prev = () => {
            current.value--
        }
        const done = () => {
            message.success('提交成功')
            current.value++
        }

        return {
            next,
            prev,
            current,
            steps,
            form,
            done
        }
    }
});
</script>

<style lang="less" scoped>
</style>
